<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本使用</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<!-- 第三步 ：编写组件标签  -->
			<school></school>
			<hr >
			<student></student>
		</div>
		<div id="root2">
			
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false
			// 第一步 ： 创建一个 school 组件
			const school = Vue.extend({
				template:`
				<div>
					<h2>学校名称:{{schoolName}}</h2>
					<h2>学校地址:{{address}}</h2>
				</div>`,
				// el:"#root", // 组件定义时不能写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于那个容器
				data(){
					return {
						schoolName:"济宁学院",
						address:"山东济宁"
					}
				}
			})
			const student = Vue.extend({
				template:'<div><h2>学生姓名:{{studentName}}</h2><h2>学生年龄:{{age}}</h2></div>',
				// el:"#root", // 组件定义时不能写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于那个容器
				data(){
					return {
						studentName:"张三",
						age:18
					}
				}
			})
			const hello = Vue.extend({
				template:`<h2>你好啊</h2>`
			})
			// 定义全局注册组件
			Vue.component("hello",hello)
			new Vue({
				el:"#root",
				//第二步: 注册组件（局部注册）
				components:{
					school:school,
					student:student
				}
			})
			new Vue({
				el:"#root2"
			})
		</script>
	</body>
</html>
